<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>信用卡包</title>
<link th:href="@{/ksdH5/css/public/mui/mui.css}" rel="stylesheet"/>
<script th:src="@{/ksdH5/js/public/mui/mui.min.js}"></script>
<script th:src="@{/ksdH5/js/public/jquery.min.js}"></script>
<script th:src="@{/ksdH5/js/public/public.js}"></script>
<link th:href="@{/ksdH5/css/public/leftNav.css}" rel="stylesheet"/>
<link th:href="@{/ksdH5/css/myCard/creditCard.css}" rel="stylesheet"/>
</head>
<body>
<!--头部-->
<div class="headerBox">
	<a href="javascript:void(0);" class="headerBox_left"><img th:src="@{/ksdH5/img/header_leftIcon.png}" /></a>
	<!--关闭按钮-->
	<a href="javascript:void(0);" class="headerBox_leftClose"><img th:src="@{/ksdH5/img/login/closeBnt.png}" /></a>
	<span>我的卡包</span>
	<a href="javascript:void(0);" class="headerBox_right"><img th:src="@{/ksdH5/img/header_rightIcon.png}" /></a>
</div>
<div class="mui-content">
<div class="myCard_tabBox">
	<a href="javascript:void(0);" class="myCard_tabBox_active">信用卡</a>
	<a th:href="${#httpServletRequest.getScheme()+'://'+#httpServletRequest.getServerName()+':'+#httpServletRequest.getServerPort()+#httpServletRequest.getContextPath()+'/h5/card/cashCard'}">储蓄卡</a>
</div>
<div class="creditCard_list" id="creditCard_list">
	<!-- <div class="cardManagementBox_yhkBnt">
        <img class="cardManagementBox_cardBg" th:src="@{/ksdH5/img/zwt/yhBg.png}" />
        <div class="cardManagementBox_box">
            <div class="cardManagementBox_left">
                <img th:src="@{/ksdH5/img/zwt/msyh_logo.png}" />
            </div>
            <div class="cardManagementBox_middle">
                <div class="cardManagementBox_middle_top">
                    <span>华夏银行</span>
                </div>
                <div class="cardManagementBox_middle_middle">1997&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;0235</div>
                <div class="cardManagementBox_middle_bottom">
                    <span>账单日
                        <em>18日</em></span>
                    <span>还款日
                        <em>28日</em></span>
                </div>
            </div>
        </div>
    </div> -->
</div>

<!--暂无数据-->
<div id="no_have_data" class="planList_noData" style="display: none;">
	<div class="planList_noData_img">
		<img class="" th:src="@{/ksdH5/img/myCard_zwsj.png}" />
	</div>
	<div class="planList_noData_title">您还没有信用卡哦</div>
	<div class="planList_noData_cont">赶快点击右上角添加按钮，添加信用卡吧！</div>
</div>
</div>
<!--左侧导航-->
<!-- 引入导航页面 -->

<!-- ecr/html/includeNav:是子页面的文件路径 ；myNav：是子页面中被引用代码块的名称
（如th:fragment="myNav"） -->
<div th:replace="h5/ksdH5IncludeNav :: ksdH5Nav"  ></div>

<div class="huiseBox"></div>
<!--添加信用卡-->
<div class="addCreditCardBg" style="display: none;"></div>
<div class="addCreditCard" style="display: none;">
	<div class="makePlan_selectedCardBox_topBox">
		<span>添加信用卡</span>
		<a href="javascript:void(0);" class="makePlan_selectedCardBox_closeBnt"><img th:src="@{/ksdH5/img/login/closeBnt.png}" /></a>
	</div>
	<div class="makePlan_selectedCardBox_listBox">
		<div class="m_s_l_inputBox">
			<span class="m_s_l_i_span" id="credit_mer_name"></span>
		</div>
		<div class="m_s_l_inputBox">
			<input class="m_s_l_inputBox_input" id="credit_card_no" type="number" placeholder="请输入信用卡号" />
		</div>
		<div class="m_s_l_inputBox">
			<input class="m_s_l_inputBox_input" id="credit_bank_phone"  type="text" placeholder="请输入银行预留手机号" />
		</div>
		<div class="m_s_l_inputBox1">
			<input class="m_s_l_inputBox1_input1" id="credit_expdate"  type="tel" maxlength="4" placeholder="有效期"  />
			<input class="m_s_l_inputBox1_input1" id="credit_cvn" type="tel" maxlength="3" placeholder="安全码"  />
			<input class="m_s_l_inputBox1_input2" id="credit_limit_money" type="tel" placeholder="额度"  />
		</div>
		<div class="m_s_l_timeBox">
			<input type="tel" maxlength="2" id="credit_bill_day" placeholder="账单日" />
			<input type="tel" maxlength="2" id="credit_repayment_day" placeholder="还款日" />
		</div>
		<div id="redit_confim_div" class="m_s_l_tishi" style="display: none">
			<label class="loginBox_contBox_tishi_left " id='m_s_l_tishi_bnt'>
				<input type="checkbox" id="credit_confim_box" class="loginBox_contBox_tishi_left_input" />确认信息无误直接提交
			</label>
		</div>
		<button onclick="addCreditCard()" class="m_s_l_bnt">提交</button>
	</div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
//获得项目根路径
var ctx = [[@{/}]];
</script>

 <script type="text/javascript">
 var  isActive = 0;
 
 var prefix = ctx +"h5";
    	$(function(){
    		$('.loginBox_contBox_tishi_left').on('click',function(){
    			var intValue = parseInt(isActive/2);
    			if((intValue)%2==0){
    				$('.loginBox_contBox_tishi_left').addClass("active");
    			}else {
    				$('.loginBox_contBox_tishi_left').removeClass("active");
    			}
    			isActive=isActive+1;
    		});
    		
    		//指定第四个菜单样式选中
    		$(".leftNavContBox_contBox li").eq(4).find("a").addClass('leftNavContBox_contBox_bnt_active');
    		//查询用户信息
    		 $.ajax({
					url : ctx+ "h5/merInfo",
					type : "POST",
					success : function(re) {
					if (re.status == "SUCCESS") {
						var merchant = re.merchant;
						if(merchant.idCardNumber==null || merchant.idCardNumber==""){
							mui.toast("您还未实名认证,正在跳转实名认证页面",{ duration:'long'});
							setTimeout(function (){
								//跳转到实名认证页面
								location.href = ctx + 'h5/realName';
							}, 1000);
						}
						$("#nav_mer_name").text(merchant.merchantCnName);
						$("#nav_mer_phone").text(merchant.phone);
						var level = merchant.level;
						if(level=="1"){
							$("#nav_mer_level").text("免费用户");
						} else if(level=="2"){
							$("#nav_mer_level").text("经理（未激活）");
						} else if(level=="3"){
							$("#nav_mer_level").text("经理");
						}
						//指定头像
						var headImg = re.headImg;
						if(headImg != ""&& headImg !=null){
							$("#head_img").attr('src',headImg);
						}
						$("#credit_mer_name").text(merchant.merchantCnName);
					} else {
						
					}
				}
			}); 
    		
    		//查询信用卡列表
    		 $.ajax({
					url : ctx+ "h5/card/list",
					type : "POST",
					success : function(re) {
					if(re.status == "out"){
						//跳转登陆页面
						location.href = ctx + 'h5/login';
					}	
					if (re.status == "SUCCESS") {
						//var cardList =JSON.parse(re.obj.CCList);
						var cardList =re.list;
						 if(cardList.length==0){
							$("#no_have_data").show();
						} else {
							$("#no_have_data").hide();
						}
						//遍历json数组字符串
						var cardStr ="";
						$.each(cardList,function(index,obj)　　{
							cardStr += "<a href="+"'"+ctx+"h5/card/edit/?id="+obj.id+"'class='cardManagementBox_yhkBnt'>";
							cardStr += "<img class='cardManagementBox_cardBg' src='/ksdH5/img/zwt/yhBg.png' />";
							cardStr += "<div class='cardManagementBox_box'>";
							cardStr += "<div class='cardManagementBox_left'>";
							cardStr += "<img src='"+obj.ccImg+"'/>";
							cardStr += "</div>";
							cardStr += "<div class='cardManagementBox_middle'>";
							cardStr += "<div class='cardManagementBox_middle_top'>";
							cardStr += "<span>"+obj.bankName+"</span>";
							cardStr += " </div>";
							cardStr += " <div class='cardManagementBox_middle_middle'>"+obj.bankAccount.substr(0,4)+"&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;"+obj.bankAccount.substr(obj.bankAccount.length-4)+"</div>";
							cardStr += "<div class='cardManagementBox_middle_bottom'>";
							cardStr += "<span>账单日<em>"+obj.billDay+"日</em></span>";
							cardStr += "<span>还款日<em>"+obj.repaymentDay+"日</em></span>";
							cardStr += "</div>";
							cardStr += "</div>";
							cardStr += "</div>";
							cardStr += "</a>";
					　　});
						$("#creditCard_list").html(cardStr);
					} else {
						
					}
				}
			}); 
    		
    	})
 </script>

<script type="text/javascript">
mui.init({
	swipeBack:true
})
/*左边导航*/
$(document).on('click','.headerBox_left',function(){
	$('.huiseBox').show();
	$('.leftNavContBox').show();
	$('.headerBox_leftClose').show();
	$('.headerBox_left').hide();
	$("body").attr("style","left:5.48rem;position:fixed;"); 
	$(".headerBox").css('left','5.48rem');   
});
$(document).on('click','.headerBox_leftClose',function(){
	$('.huiseBox').hide();
	$('.leftNavContBox').hide();
	$('.headerBox_leftClose').hide();
	$('.headerBox_left').show();
	$("body").removeAttr("style");   
	$("body").removeAttr("style"); 
	$(".headerBox").css('left','0');   
});
/*添加信用卡*/
$(document).on('click','.headerBox_right',function(){
	$('.addCreditCardBg').show();
	$('.addCreditCard').show();
});
/*关闭添加信用卡*/
$(document).on('click','.makePlan_selectedCardBox_closeBnt',function(){
	$('.addCreditCardBg').hide();
	$('.addCreditCard').hide();
});
/*复选框样式*/
	
	
	/* $('').on("click",function(){
		
	});  */
/* $(function(){
	$('.loginBox_contBox_tishi_left').on('click',function(){
		$('.loginBox_contBox_tishi_left').toggleClass('active');
	});
}); */
/*打开新的下载页面窗口*/
$(document).on('click','#uploadBnt',function(){
	window.open("https://fir.im/Katimes");
})
</script>
<script type="text/javascript">
//滚动条到底部加载更多
$(document).scroll(function(){
	if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
        var shopIndex_box_listBox = new Array()
        for (a=0;a<20;a++){
        	shopIndex_box_listBox[a] = ''
        }
		for(i=0;i<shopIndex_box_listBox.length;i++){
			$(".quick_cardChoose_list").append(shopIndex_box_listBox[i]);
		}
        
        /*$.ajax({
        	type:"post",
        	url:"",
        	async:true,
			dataType:"json",
			success:function(data){
				for (var i = 0; i < sum; i++) {   
	                result +=	''
	            }
				$('.planList_listBox').append(result);
			},
			error:function(){
				alert('数据有误');
			}
        }); */
	}
});
var submitAddNum=1;//定义的提交绑卡次数
//添加信用卡操作
function addCreditCard(){
	var isChecked = $('#credit_confim_box').prop('checked');
	if(submitAddNum==3){
		if(!isChecked){
			submitAddNum=2;
		} 
	}
	
	
	var credit_card_no = $.trim($("#credit_card_no").val());//卡号
	var noLength = credit_card_no.length;
	if(noLength>25 || noLength<10){
		mui.toast("请输入正确的信用卡号",{ duration:'long'});
		return;
	}
	var credit_bank_phone =$.trim($("#credit_bank_phone").val()) ;//银行预留手机号
	var length = credit_bank_phone.length;
	var phone=/^1[3456789]\d{9}$/;
	if(length != 11 || !phone.test(credit_bank_phone)){
		mui.toast("手机号填写错误",{ duration:'long'});
		return;
	}
	var credit_expdate = $.trim($("#credit_expdate").val());//有效期
	var  expdateLen = credit_expdate.length;
	if(expdateLen != 4 ){
		mui.toast("请填写正确有效期",{ duration:'long'});
		return;
	}
	var credit_cvn = $.trim($("#credit_cvn").val());
	var cvnLen=credit_cvn.length;
	if(cvnLen !=3){
		mui.toast("请填写正确的安全码",{ duration:'long'});
		return;
	}
	var credit_limit_money = $.trim($("#credit_limit_money").val());
	var credit_bill_day = $.trim($("#credit_bill_day").val());
	var billDayLen=credit_bill_day.length;
	if(billDayLen>2 || billDayLen==0){
		mui.toast("请填写正确的账单日",{ duration:'long'});
		return;
	}
	var credit_repayment_day = $.trim($("#credit_repayment_day").val());
	var repaymentDayLen=credit_repayment_day.length;
	if(repaymentDayLen>2 ||repaymentDayLen==0 ){
		mui.toast("请填写正确的还款日",{ duration:'long'});
		return;
	}
	
	$.ajax({
		url : ctx +"h5/card/addCreditCard",
		dataType : "json",
		type : "POST",
		data:{
			"cardNo":credit_card_no,
			"bankPhone":credit_bank_phone,
			"expdate":credit_expdate,
			"cvn":credit_cvn,
			"limitMoney":credit_limit_money,
			"billDay":credit_bill_day,
			"repaymentday":credit_repayment_day,
			"num":submitAddNum,
		},
		success : function(re) {
			if(re.status=="out"){
				//跳转登陆页面
				location.href = ctx + 'h5/login';
			}
			submitAddNum = submitAddNum+1;
			if(submitAddNum==3){
				$("#redit_confim_div").show();
			}
			if(re.status=="SUCCESS"){
				mui.toast(re.msg,{ duration:'long'});
				//返回列表
				setTimeout(function (){
					window.location.reload();
				}, 1000);
			}else {
				mui.toast(re.msg,{ duration:'long'});
				return;
			}
		}
	});
	
	
}
/* $(document).on('click','#m_s_l_tishi_bnt',function() {
	var a =$(this).hasClass('m_s_l_tishi_bnt_active');
	mui.alert("aaaaa"+a);
	if($(this).hasClass('m_s_l_tishi_bnt_active')) {
	 	$(this).removeClass('m_s_l_tishi_bnt_active');
	 	mui.alert("2");
	 	return;
	} else if (!$(this).hasClass('m_s_l_tishi_bnt_active')) {
	 	$(this).addClass('m_s_l_tishi_bnt_active');
	 	mui.alert("3");
	 	return;
	}
}); */

</script>
</html>
